<template>
	<div class="swiper-container">
		<!-- Swiper 容器 -->
		<Swiper
			:modules="modules"
			:slides-per-view="3"
			:space-between="8"
			:loop="true"
			:pagination="{ clickable: true }"
			:navigation="true"
			:breakpoints="{
				320: {
					slidesPerView: 1,
					spaceBetween: 10,
				},
				768: {
					slidesPerView: 2,
					spaceBetween: 8,
				},
				1024: {
					slidesPerView: 3,
					spaceBetween: 8,
				},
			}"
		>
			<!-- 轮播项 -->
			<SwiperSlide v-for="(item, index) in images" :key="index" @click="bookDetails(item)">
				<img :src="item.src" class="slide-image" alt="轮播图" />
			</SwiperSlide>

			<!-- 分页器（可选，需配合 pagination 配置） -->
			<template #pagination>
				<div class="swiper-pagination"></div>
			</template>

			<!-- 导航按钮（可选，需配合 navigation 配置） -->
			<template #navigation>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</template>
		</Swiper>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// 引入 Swiper 核心组件和样式
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
// 引入所需模块（按需导入）
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import { useRouter } from "vue-router";
const router = useRouter();

// 注册使用的模块
const modules = [Autoplay, Pagination, Navigation];

// 轮播图数据
const images = [
	{
		src: new URL("../assets/images/banner01.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner02.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner03.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner04.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner05.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner06.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner07.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner08.png", import.meta.url),
	},
	{
		src: new URL("../assets/images/banner09.png", import.meta.url),
	},
];

const bookDetails = (item) => {
	console.log(item);
	router.push('/book')
};
</script>

<style scoped lang="scss">
.swiper-container {
	max-width: 100%;
	margin: 0 auto;
}

.slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slide-image:hover{
	cursor: pointer;
}
:deep(.swiper-pagination-bullet) {
	background: #fff;
	opacity: 0.3;
}
:deep(.swiper-pagination-bullet-active) {
	background: #fff;
	opacity: 1;
}
:deep(.swiper-button-prev) {
	color: #fff;
}

:deep(.swiper-button-next) {
	color: #fff;
}

:deep(.swiper-button-prev:after) {
	font-size: 1.5rem;
}
:deep(.swiper-button-next:after) {
	font-size: 1.5rem;
}
</style>
